<!--  -->
<template>
  <div class="mv-container">
    <header><span @click="quit">退出登录</span>个人中心</header>
    
    <van-image
      class="img"
      round
      width="1.5rem"
      height="1.5rem"
      src="https://img01.yzcdn.cn/vant/cat.jpeg"
    />
    <van-cell-group class="item" inset>
       <van-cell title="昵称" value="Ranger" size="large" />
       <van-cell title="性别" value="男♂" size="large" />
       <van-cell title="年龄" value="22" size="large" />
       <van-cell title="地区" value="广东广州" size="large" />

    </van-cell-group>

    <van-circle class="safety" v-model="currentRate" :rate="90" :speed="100" :text="text" :stroke-width="100" size="1.5rem" color="#008000" />
    
 
  </van-list>
</van-pull-refresh>
    </van-list>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Vue from "vue";
import { List } from "vant";
import { Cell } from "vant";
import { Circle } from "vant";
import { Image as VanImage } from "vant";
import { CellGroup } from "vant";

Vue.use(CellGroup);
Vue.use(VanImage);
Vue.use(Circle);
Vue.use(Cell);
Vue.use(List);
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      currentRate: 0,
    };
  },
  methods: {
    quit: function () {
      this.$router.push("/home/profile");
      localStorage.removeItem("token");
    },
  },
  //监听属性 类似于data概念
  computed: {
    text() {
      return "账号安全度" + this.currentRate.toFixed(0) + "%";
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
@import url("@/assets/border.less");
.mv-container {
  header {
    height: 0.45rem;
    line-height: 0.45rem;
    color: white;
    font-weight: bold;
    background-color: #e54847;
    text-align: center;
    font-size: 0.16rem;
    margin-left: -0.75rem;
    span {
      padding-right: 0.2rem;
    }
  }
  .img {
    margin-top: 0.2rem;
    margin-left: 1.125rem;
  }
  .item {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
  }
  .van-cell__value {
    font-size: 16px;
    color: black;
  }
  .van-circle__text {
    color: green;
  }
  .safety {
    margin-top: 0.1rem;
    margin-left: 1.125rem;
  }
}
</style>